body {
  font-family: arial, verdana, sans-serif;
  font-size: 16px;
  background: #3c3c3c;
  padding: 19px 0;
}

/* reset */
h1 {
  margin-top: 35px;
  margin-bottom: 20px;
  font-weight: bold;
}
h2, h3, h4 { margin-top: 0px; }
h4, h5 { margin-bottom: 5px; }
fieldset { padding: 0; margin: 0; border: 0; }


.button_metro {
	background-color : #de9317;
	border : 2px solid white;
	height : 40px;
	width : 150px;
	color : white;
	font-family : Segoe UI Semibold;
	font-size : 18px;
}

#login  {
	text-align : center;
	font-size : 20px;
	border-top : 2px solid white;
	border-bottom : 2px solid white;
	height : 145px;
	width : 95%;
	padding-top : 15px;
	color : white;
	font-family : Segoe UI Semibold;
	margin: 0px auto;
}

/* global styling */
em {
  font-weight: bold;
  font-style: normal;
}

input {
  font-family: arial, verdana, sans-serif;
  padding: 0;
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

.submit {
  background-color: #ff8000;
  cursor: pointer;
  border: 0;
  padding: 0;
  margin: 0;
}

div.inputs {
  float: left;
  width: 270px;
}
  div.inputs input {
    height: 18px;
    font-size: 1em;
  }
  div.inputs input.single {
    width: 265px;
  }


  div.input {
    float: left;
    width: 270px;
    vertical-align: middle;
  }
    div.input label {
      float: left;
      margin-top: 3px;
    }
    div.input textarea {
      float: right;
      height: 100px;
      width: 188px;
      margin-bottom: 3px;
    }
    div.input input {
      float: right;
      width: 190px;
      margin-bottom: 3px;
    }
    div.input select {
      float: right;
      width: 194px;;
      margin-bottom: 3px;
      padding: 2px;
    }

div.buttons {
  float: left;
}
  div.buttons input {
    height: 18px;
    font-size: 1em;
  }
  div.buttons .submit {
    width: 117px;
    height: 50px;
    border: 0;
    font-weight: bold;
  }
  div.buttons .wide {
    width: 217px;
  }
  div.buttons .single {
    height: 24px;
  }

/* Special for the templates */
input.submitTemplate {
  margin-top: 10px;
  margin-right: 6px;
}

div.inputsTemplate {
  width: 100%;
}

div.inputsTemplate input {
  float: left;
  width: 30px;
  margin-right: -6px;
}

img { border: 0px; }



div.navbtn {
  padding-bottom: 30px;
}
  div.navbtn input.submit {
    width: 140px;
    height: 34px;
    border: 0;
    font-weight: bold;
  }
  div.navbtn div.forward { float: right; }
  div.navbtn div.backward { float: left; }





#container {
  margin: 5px auto;
  width: 896px;
  background: #ffffff;
}


#header {
  clear: both;
}
  #header img { border: 0px; }
  #logo { float: left; margin: 27px 0px 27px 31px; }
  #payoff { float: right; margin: 58px 14px 25px 0px; }


/* MENU */
#menu {
  clear: both;
  float: left;
  background: black;
  font-weight: bold;
  width: 100%;
  color: white;
  height: 29px;
}
  #menu ul {
    margin: 0px;
    padding-right: 0px;
    padding-left: 0px;
    padding-bottom: 0px;
    padding-top: 0px;
  }
  #menu li {
    float: left;
    display: block;
    padding-top: 5px;
    height: 29px;
  }
  #menu a {
    color: white;
  }
  #menu .deviceid {
    color: white;
  }
  #menu li a {
    padding-right: 10px;
    padding-left: 10px;
    padding-top: 5px;
    height: 29px;
  }
  #menu a:hover { text-decoration: underline; }
  #menu .selected { background: #d9d9d9; }
  #menu .selected a { color: black; }
  /* #menu .hilite { background: #ff8000; } */
  .hilite { background: #ff8000; }
  #menu .hilite a { color: black;}

  #pluginflag {
    float: right;
    padding-top: 13px;
    padding-right: 5px;
    margin: 0px;
    display: none;
  }

  #login {
    float: right;
    padding-top: 11px;
    padding-right: 15px;
    margin: 0px;
  }
    #login #user_fullname, #login #user_email {
      font-size: x-small;
      display: block;
    }
    #login #user_detail {
      float: left;
      text-align: right;
    }
    #login form {
      margin:0;
      padding:0;
    }
    #login input {
      font-family: arial, verdana, sans-serif;
      height: 1.3em;
      font-size: 0.7em;
      border: 0;
      padding: 0;
      margin: 0;
      vertical-align: middle;
    }
    #login #username {
      width: 90px;
    }
    #login #password {
      width: 80px;
    }
    #login .submit {
      width: 44px;
    }
    #login div.label {
      position: relative;
      float: left;
      margin-right: 5px;
    }
    #login label {
      font-size: 0.6em;
    }
    #login label.over {
      color: #aaa;
      position: absolute;
      bottom: 3px;
      left: 6px;
    }


  .logo { float: left; margin: 5px 30px 5px 12px; }


/* SUBMENU */

#submenu {
  font-weight: bold;
  clear: both;
  float: left;
  width: 100%;
  background: #d9d9d9;
}
  #submenu ul {
    font-size: smaller;
    margin-top: 8px;
    margin-bottom: 0px;
    padding-left: 50px;
  }
  #submenu li {
    float: left;
    display: block;
    padding-bottom: 5px;
    padding-top: 5px;
  }
  #submenu a {
    color: black;
    padding-right: 10px;
    padding-left: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
  }
  #submenu a:hover { text-decoration: underline; }
  #submenu li.selected { background: white url("/gfx/ltsm.gif") left top no-repeat; }
  #submenu li.selected a { background: url("/gfx/rtsm.gif") right top no-repeat; }
  #submenu li.selected a:hover { text-decoration: underline; }



/* Diverse  */

.required { font-weight: bold; }


#left {
  float: left;
  width: 5px;
  padding-top: 1px;
  padding-left: 5px;
  padding-right: 0px;
  margin: 0;
  color: #3c3c3c;
  /*
  border:1px;
  border-color:green;
  border-style:solid;
  */
}
  #left ul {
    list-style: none;
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
    /*
    border:1px;
    border-color:red;
    border-style:solid;
    */
  }


#content {
  float: left;
  width: 575px;
  padding-bottom: 50px;
  color: #3c3c3c;

  /*
  border:1px;
  border-color:red;
  border-style:solid;
  */
}
  #content a:link, #content a:visited, #content a:hover { text-decoration: underline; }


#right {
  float: right;
  width: 150px;
  padding-top: 30px;
  padding-left: 15px;
  padding-right: 35px;
  color: #3c3c3c;
  /*
  border:1px;
  border-color:blue;
  border-style:solid;
  */
}
  #right ul {
    list-style: none;
    margin: 0;
    padding-left: 1em;
    text-indent: -1em;
  }

.invite#right {
  margin-top: 80px
}
  .invite#right li {
    margin-top: 1em;
  }
  .invite#right li.selected {
    font-weight: bold
  }

  div.teaser { }
  div.teaser img { margin-bottom: 10px; }
  div.teaserheader { }
  div.teasertext { font-size: smaller; }



/* box with round corners */
/* Kudos to http://justaddwater.dk/2007/02/15/rounded-corners-the-technorati-way/ */
.boxc {
  background: #d9d9d9;
  position:relative;
  padding-top: 25px;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 25px;
  margin-bottom: 25px;
  width: 200px;
  font-size: 14px;
}


  .content
   {
    margin-left: 10px; width: 580px; margin-top: 0px; position: relative; top: -14px;
  }

  .contentsmall
   {
     font-size: smaller;
    margin-left: 10px; width: 380px; margin-top: 0px; position: relative; top: -14px;
  }

  .dropdowner
   {
    padding-top: 5px; padding-bottom: 3px; cursor: pointer; margin-bottom: 0px;
  }

  .boxc img.arrow
   {
    padding-left: 10px; padding-right: 20px; padding-bottom: 3px; height: 10px;
  }

  .boxc raise
   {
    position: relative; top:-2px;
    margin-left: 10px; width: 380px; margin-top: 0px; position: relative; top: -14px;
  }

  .boxc b.cn { height: 10px; width: 10px; background:
    url("/gfx/box-corners.gif") no-repeat;
    position:absolute;
  }
  .boxc b.tl {top: -1px; left: -1px; background-position: top left;}
  .boxc b.tr {top: -1px; right: -1px; background-position: top right;}
  .boxc b.bl {bottom: -1px; left: -1px; background-position: bottom left;}
  .boxc b.br {bottom: -1px; right: -1px; background-position: bottom right;}

  /* IE Filters */
  * html .boxc b.bl {bottom:-2px}
  * html .boxc b.br {bottom:-2px}
  * html .boxc b.cn {
     background-image: url("/gfx/box-corners.gif");
     line-height: 1px;
     font-size: 1px;
  }

  .boxc p {
    margin-top: 0px;
    margin-bottom: 20px;
  }

  .boxc table {
    width: 100%;
   }

  .boxc table td {
    font-size: 100%;
    padding-right: 10px;
  }

  .boxc .bold {
    font-weight: bold;
  }

  .boxc .note {
     margin-top:20px;
     font-size: smaller;
  }

/* Signup */

div.message {
  float: left;
  margin-top: 40px;
}

/* alpha */
  div.alphacode {
    margin-top: 10px;
    margin-bottom: 20px;
  }


#footer {
  font-size: smaller;
  clear: both;
  color: white;
  background: black;
  width: 100%;
}
  #footer ul {
    margin: 0px;
    height: 30px;
    padding-left: 15px;
  }

  #footer li {
    float: left;
    display: block;
    padding: 8px 15px 15px 0px;
  }
  #footer li a {
    color: white;
    padding: 8px 15px 15px 0px;
  }

  #footer .payoff {
    float: right;
    margin: -29px 14px 0px 0px;
  }


a:link, a:visited { color: black; text-decoration: none; }
a:hover { color: black; text-decoration: underline; }



/* Front page */

#frontpage {
  clear: both;
  padding-top: 30px;
  padding-bottom: 70px;
}
  #illustration { padding-bottom: 50px; }
  #illustration img {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  #introduction { width: 100%; }
    table { border-collapse: collapse; }
    table th { text-align: left; }
    table td { font-size: small; }

    #row1 { height: 50px; background: #d9d9d9; }
    #row2 { height: 70px; vertical-align: bottom; }
    #row3 { vertical-align: top; }

    #col1 { width: 8%; }
    #col2 { width: 20%; }
    #col3 { width: 20%; }
    #col4 { width: 20%; }
    #col5 {
      width: 32%;
      background: #ff8000;
      font-weight: bold;
      text-align: center;
    }
    #col5 a { color: black;}
    .col { padding-right: 40px; }

#logos
{
  text-align: center;
  padding-bottom: 20px;
}

#logos img
{
  padding-left: 15px;
}

#logosAtWelcome
{
  width: 70%;
  text-align: center;
  position: relative;
  top: -60px;
}

#logosAtWelcome img
{
  padding-left: 15px;
}

#frontpage { height: 450px; }
#frontpage .column {
  float: left;
  width: 367px;
  margin-left: 62px;
  margin-right: -30px;
}
  #frontpage .column img {
    margin: 22px 0px 8px 25px;
  }
  #frontpage .boxc {
    width: 367px;
    height: 333px;
    padding: 0px;
  }
  #frontpage .text {
    margin: 5px 0px 5px 25px;
    width: 220px;
    float: left;
  }
  #frontpage .teaser {
    height: 50px;
    width: 367px;
    background: black;
    font-weight: bold;
    font-size: 11pt;
    cursor: pointer;
  }
  #frontpage .teaser .text {
    padding-top: 2px;
    color: white;
  }
  #frontpage .teaser .button {
    float: right;
    padding-top: 18px;
    height: 32px;
    width: 115px;
    background-color: #ff8000;
    color: black;
    font-size: small;
    text-align: center;
  }
  #frontpage .details {
    padding-top: 10px;
    color: #7a7a7a;
  }
    #frontpage .details em {
      color: black;
    }
    #frontpage .details .text {
      width: 210px;
      line-height: 140%;
      font-size: 14px;
    }
    #frontpage .details .links {
      width: 115px;
      float: right;
      margin: 0px;
    }
    #frontpage .details .links ul {
      list-style: none;
      font-size: 12px;
      padding-left: 1em;
      margin-left: 0px;
      text-indent: -1em;
    }
    #frontpage .details .links li {
      padding-top: 10px;
      padding-left: 0px;
    }



/* User */

a.add, a.remove, a.configure, a.accept, a.ignore, a.invite {
    width: 14px;
    height:14px;
    text-indent:-9000px;
    display:block;
    float:right;
    margin-right:4px;
    margin-bottom:4px;
}

a.add { background:url(/gfx/icons/add.gif) top left no-repeat; }
a.remove { background:url(/gfx/icons/remove.gif) top left no-repeat; }
a.configure { background:url(/gfx/icons/configure.gif) top left no-repeat; }
a.accept { background:url(/gfx/icons/accept.gif) top left no-repeat; }
a.ignore { background:url(/gfx/icons/ignore.gif) top left no-repeat; }
a.invite { background:url(/gfx/icons/accept.gif) top left no-repeat; }


img.illustration {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 50px;;
  margin-bottom: 50px;
}

img.illustration2 {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#content table {
  width: 100%;
}
  #content table .description {
    width: 150px;
  }
  #content table .actions {
    text-align: right;
  }
  #content table th {
    font-size: small;
    padding-right: 10px;
  }

  #content table td {
    padding-right: 10px;
  }

#content #installnabtoplugin {
  display: none;
}

#content #serverinstall code {
  white-space: nowrap;
}

#content #serverinstall em {
  font-size: smaller;
  font-weight: bold;
}

#content #serverinstall img {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

#content #friendinvite textarea { margin-top: 10px; width: 394px; }
#content #friendinvite select { margin-top: 10px; width: 400px; }


/*
#content #friendinvite #name, #address {
  width: 240px;
}

#content #account fieldset {
  border: 0px;
}
*/


/* browser plugin */

#plugin {
  clear: both;
  font-size: 100%;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 20px;
  padding-bottom: 150px;
}

  #plugin a:link, #plugin a:visited, #plugin a:hover { text-decoration: underline; }

  #plugin table td {
    font-size: 100%;
  }

  input.btn {
    color: black;
    font-size: small;
    background-color:#ff8000;
    border:1px solid;
    border-color: white;
  }

  input.btnhov {
    border-color: black;
  }



/* server peer admin */

#admin {
  clear: both;
  font-size: 100%;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 10px;
  padding-bottom: 150px;
}
  #admin a:link, #admin a:visited, #admin a:hover { text-decoration: underline; }


/* auxiliary */

div.auxiliary textarea {
    height: 400px;
    width: 400px;
    font-size: 1.2em;
}

div.auxiliary div.input input {
    width: 400px;
    font-size: 1em;
}
div.auxiliary div.input {
    width: 400px;
}

/* News section on frontpage */
.slider {position:relative; overflow:hidden; height:225px; margin-bottom:20px}
.slidercontent {position:absolute}
.slidercontent .upper {border-bottom:1px solid #9ac1c9}
.section {padding:10px}
.newsslider {position:relative; overflow:hidden; height:95px; width:300px; margin-bottom:20px; font-size:12px; margin-left: auto; margin-right: auto;}
.newssection a:hover {text-decoration: none;}
.newsslidercontent {position:absolute}
.newssection {padding:10px; height:75px}
.notice { text-align: center; position:relative; font-size:14px; font-weight: bold; width:500px; margin-left: auto; margin-right:auto; margin-bottom:20px;}
